<template>
    <div class="sealsLegend">
        <div class="loading" v-if="pageStat">
            <Loading></Loading>
        </div>
        <div class="content" v-if="!pageStat">
            <Title titleName="Seals Legend"></Title>
            <ul>
                <li v-for="item in sealsLegend" :key="item.recordName" class="itemSealsLegend">
                    <div class="right">
                        <img :src="item.recordImg" class="recordImg">
                    </div>
                    <div class="left">
                        <span class="recordName">{{item.recordName}}</span>
                        <span class="recordDescription">{{item.recordDescription}}</span>
                        <ul class="eg">
                            <li v-for="obj in item.objectives" :key="obj.objectives" class="obj">
                                <div class="square"></div>
                                <div class="objectives">{{obj.objectives}}</div>
                                <div class="requirement">{{obj.requirement}}</div>

                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import axios from 'axios'
    import Loading from '@/components/loading/Loading.vue'
    import Title from '@/components/title/Title.vue'

    export default {
        data() {
            return {
                sealsLegend: [],
                pageStat: true
            }
        },
        components: {
            Loading,
            Title
        },
        created() {
            this.getData()
        },
        methods: {
            getData() {
                console.log(this.$route.params.id)
                axios
                    .get("/api/getSealsLegend", {
                        params: {
                            id: this.$route.params.id
                        }
                    })
                    .then((res) => {
                        console.log(res.data);
                        this.sealsLegend = res.data;
                        this.$nextTick(() => {
                            this.pageStat = false
                        })
                    })
                    .catch((err) => {
                        console.error(err);
                    });

            },
            back() {
                this.$router.go(-1)
            }
        }
    }
</script>

<style scoped>
    .loading {
        height: 718px;
        overflow: hidden;
        color: #ccc;
    }

    .itemSealsLegend {
        display: flex;
        color: white;
        border-bottom: 1px #ccc solid;
        padding: 3px 0;
    }

    .right {
        margin: 5px;
    }

    .recordImg {
        width: 50px;
        height: 50px;
    }

    .left {
        margin-top: 5px;
        font-size: 15px;
    }

    .left span {
        display: block;
    }

    .recordName {
        font-size: 20px;
        font-weight: bold;
    }

    .recordDescription {
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    }

    .square {
        border-radius: 50%;
        background: #ffffff;
        width: 5px;
        height: 5px;
        margin-right: 5px;
    }

    .obj {
        display: flex;
        margin: 3px 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        align-items: center;
    }

    .requirement {
        margin: 0 5px;
    }
</style>